<template>
	<view class="page">
		<up-navbar title="编辑客户资料" :autoBack="true" safeAreaInsetTop placeholder> </up-navbar>
		<view>
			<view style="width: 90%; margin: 0 auto; line-height: 100rpx;"><text style="color: #999999;">基本信息</text>
			</view>
		</view>
		<view style="line-height: 100rpx; background-color: #fff;">
			<view style="width: 90%; margin: 0 auto;  display: flex; justify-content: space-between; ">
				<view><text style="">姓名:</text></view>
				<view style="display: flex;align-items:center;justify-content:center;">

					<input type="text" v-model="form.nickname"    placeholder=" 请输入内容" class="fsafaf" />
					
					<image class="icon1" src="/static/Frame@2x.png" alt="" />


				</view>
			</view>
		</view>
		<view style="line-height: 100rpx; background-color: #fff; margin-top: 2rpx;" @click="diquxuanz">
			<view style="width: 90%; margin: 0 auto;  display: flex; justify-content: space-between;">
				<view><text style="">所属地区:</text></view>
				<view style="display: flex;align-items:center;justify-content:center;">
					<!-- <up-input
					    placeholder="请输入内容"
					    border="none"
					    v-model="value"
					    :customStyle="meirong"
					  ></up-input> -->
					<input type="text" v-model="form.address"  readonly  placeholder="请选择" class="fsafaf input_events_none" />
					
					<image class="icon1" src="/static/Frame@2x.png" alt="" />
				</view>
			</view>
		</view>


		<u-popup :show="show" mode="bottom" @close="close">
			<view class="sel-title" style="">
				<view style="display: flex; flex-wrap: wrap; width: 100%; padding: 20rpx;">
					<view style="width: 10%; text-align: center;" @click="quxiao"><text>取消</text></view>
					<view style="width: 74%; display: flex; flex-wrap: wrap;">
						<view style="text-align: center;width:50%;" v-if="xuanzde_neirong!=null" @click="fetchAreaData">
							<text>{{xuanzde_neirong}}</text>
						</view>
						<view style="text-align: center;width:50%;" v-if="shi_xuande!=null"
							@click="shengxuanz(this.xuanzde_neirong ,this.form.province_id	)">
							<text>{{shi_xuande}}</text>
						</view>


					</view>
					<view style="width: 10%;text-align: center;" @click="quedings"><text
							v-if="xanzhongde_xiaoqu.length!=0">确定</text></view>

				</view>
				<view style="display: flex; flex-wrap: wrap; width: 100%;">


					<view v-if="xuanzde_neirong==null"
						style=" margin: 10rpx; background: #f3f3f3;  padding: 20rpx; border-radius: 20rpx;  "
						v-for="(item,index) in sheng" :key="index" @click="shengxuanz(item.name,item.id)">
						<text style=" ">{{item.name}}</text>
					</view>
					<view v-if="shi_xuande==null"
						style=" margin: 10rpx; background: #f3f3f3;  padding: 20rpx; border-radius: 20rpx;  "
						v-for="(item,index) in shi" :key="index" @click="shixuanz(item.name,item.id)">
						<text style=" ">{{item.name}}</text>
					</view>
					<view v-if="qu_xuande==null"
						:class="item.checked ? 'sel-scroll-view-item-trues' : 'sel-scroll-view-item'"
						style=" margin: 10rpx; background: #f3f3f3;  padding: 20rpx; border-radius: 20rpx;  "
						v-for="(item,index) in quyu" :key="index" @click="quxuanz(item.id)">
						<text style=" ">{{item.name}}</text>
					</view>




				</view>
			</view>
		</u-popup>



		<view style="line-height: 100rpx; background-color: #fff; margin-top: 2rpx;">
			<view style="width: 90%; margin: 0 auto;  display: flex; justify-content: space-between;">
				<view><text style="">联系电话:</text></view>
				<view style="display: flex;align-items:center;justify-content:center;">
					<input type="text" v-model="form.mobile" placeholder="请输入内容" class="fsafaf" />
					<image class="icon1" src="/static/Frame@2x.png" alt="" />

				</view>
			</view>
		</view>
		<view style="line-height: 100rpx;">
			<view style="width: 90%; margin: 0 auto;">
				<view><text style="color: #999999;">咨询事项</text></view>

			</view>
		</view>

		<view style="width: 100%; background-color: #fff;">
			<view style="width: 90%; margin: 0 auto; display: flex; text-align: center;flex-wrap: wrap;">
				<view class=" linglein " v-for="(item, index) in jings" :key="index" @click="quxuanzs_waimai(index)">
					<view class="" :class="item.checked ? 'sel-scroll-view-item-true' : 'linglein_meir'"><text
							style="">{{item.service_name}}</text></view>
				</view>
			</view>


		</view>
		<view style="height: 300rpx; background-color: #fff; margin-top: 2rpx; ">
			<view style="width: 90%; margin: 0 auto;padding-top: 200rpx;  ">
				<view><up-button class="custom-style" shape="circle" color="#FF6A04" text="保存"
						@click="baocun"></up-button></view>

			</view>
		</view>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				sheng: [],
				shi: [],
				quyu: [],
				xanzhongde_xiaoqu: [],
				xuanzde_neirong: null,
				shi_xuande: null,
				qu_xuande: null,
				qu_xuandes:null,
				

				form: {


					uid: '',
					nickname: '',
					province_id: '',
					city_id: '',
					district_id: '',
					address: '',
					mobile: '',
					service_labels: '',
					service_labels_name: '',
				},
				jingssf: [],
				jingssf_id: [],
				value: '',

				jings: [
					// {
					// 	name: '香港留学',
					// 	checked: false,
					// },
					// {
					// 	name: '代办公司',
					// 	checked: false,
					// },
					// {
					// 	name: '香港移民',
					// 	checked: false,
					// },
					// {
					// 	name: '代办公司',
					// 	checked: false,
					// },
					// {
					// 	name: '招收高级会员',
					// 	checked: false,
					// },
				],
				kehu_id: '',

			}
		},
		onLoad(id) {
			console.log(id.id)
			this.kehu_id = parseInt(id.id)
			this.kehuxiangqing()
		},
		onShow() {

		},
		methods: {
			diquxuanz() {
				this.show = true
				this.fetchAreaData()
			},




			quxiao() {
				this.show = false			
				this.xuanzde_neirong = null
				this.shi_xuande = null
				this.shi = []
				this.quyu = []
			},




			kehuxiangqing() {


				this.$request({
					url: '/api/User/getMyUserDetail',
					header: "application/x-www-form-urlencoded",
					data: {
						uid: this.kehu_id
					}
				}).then(res => {
					if (res.code == 1) {
						var neirong = res.data
						console.log(res.data)
						this.form.mobile = neirong.mobile
						this.form.uid = neirong.id
						this.form.nickname = neirong.nickname
						this.form.province_id = neirong.province_id
						this.form.city_id = neirong.city_id
						this.form.district_id = neirong.district_id
						this.form.address = neirong.address 
						
						this.form.service_labels = neirong.service_labels
						console.log(this.form.service_labels,'service_labels')
						this.form.service_labels_name = neirong.serice_labels_name
						this.xuanzdjin()
						this.fetchAreaData()
					} else {


					}
				})
			},
			// 省
			fetchAreaData() {
				this.sheng = []
				this.xuanzde_neirong = null
				this.shi_xuande = null
				this.shi = []
				this.quyu = []
				// 假设从后端获取地区数据
				this.$request({
					url: '/api/User/getAreaLists',
					header: "application/x-www-form-urlencoded",
					data: {}
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						// jinsg.push(res.data)
						this.sheng = res.data
						console.log(this.sheng, 'sheng')

					} else {


					}
				})

			},
			// 市区
			shengxuanz(name, code) {
				this.shi = []
				this.quyu = []
				this.xanzhongde_xiaoqu=[]
				this.shi_xuande = null

				this.xuanzde_neirong = []
				console.log(name)
				console.log(code)
				this.form.province_id = code
				// var data={
				// 	name:name,
				// 	code:code,
				// }
				this.xuanzde_neirong = name
				this.xanzhongde_xiaoqu.push(this.xuanzde_neirong)
				// 假设从后端获取地区数据
				this.$request({
					url: '/api/User/getAreaLists',
					header: "application/x-www-form-urlencoded",
					data: {
						province_id: code
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						// jinsg.push(res.data)
						this.shi = res.data
						console.log(this.shi)

					} else {


					}
				})


			},
			// 区
			shixuanz(name, code) {
				this.quyu = []
				this.shi_xuande = name
				this.form.city_id = code
				// this.xanzhongde_xiaoqu=[]
				this.xanzhongde_xiaoqu.push(this.shi_xuande)
				this.$request({
					url: '/api/User/getAreaLists',
					header: "application/x-www-form-urlencoded",
					data: {
						province_id: this.form.city_id,
						city_id: code
					}
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						// jinsg.push(res.data)
						res.data.forEach((items, index) => {

							items.checked = false


						})

						this.quyu = res.data

						console.log(this.quyu)

					} else {


					}
				})
			},

			quxuanz(id) {
				console.log(id)
				this.form.district_id = id
				this.quyu.forEach((items, index) => {
					if (items.id == id) {
						items.checked = true
						this.qu_xuandes=items.name
					
					} else {
						items.checked = false
					}




				})

			
			},
			quedings(){
				
				this.show=false
				this.xanzhongde_xiaoqu.push(this.qu_xuandes)
				console.log(this.xanzhongde_xiaoqu)
				this.form.address=this.xanzhongde_xiaoqu[0]+'-'+this.xanzhongde_xiaoqu[1]+'-'+this.xanzhongde_xiaoqu[2]
			},
			xuanzdjin() {

				this.$request({
					url: '/api/User/getServiceLabelLists',
					header: "application/x-www-form-urlencoded",
					data: {}
				}).then(res => {
					if (res.code == 1) {
						res.data.forEach((item, index) => {
							// console.log(this.form.service_labels)
							this.form.service_labels.forEach((items, index) => {
								
							if(items==item.id){
								item.checked = true
								console.log(11111)
							}
						});
						// item.checked = false
							
						});
						console.log(res.data,'res.data')
						this.jings = res.data
					} else {


					}
				})
			},
			quxuanzs_waimai(index) {
				if (this.jings[index].checked == true) {
					this.jings[index].checked = false;
					for (var i = 0; i < this.jingssf.length; i++) {
						console.log(this.jingssf[i], 'jingssf')
						if (this.jingssf[i] === this.jings[index].service_name) {
							this.jingssf.splice(i, 1);
							this.jingssf_id.splice(i, 1);
						}
					}
				} else {
					this.jings[index].checked = true;

					// serice_labels:'',

					this.jingssf.push(this.jings[index].service_name)
					this.jingssf_id.push(this.jings[index].id);
				}
			},
			baocun() {
				console.log()
				this.jings.forEach((items, index) => {
							if(items.checked==true){								
								console.log(items,'items')
								this.jingssf.push(items.service_name)
								this.jingssf_id.push(items.id)
							}
						});
							var lishisfs = this.jingssf.reverse()
							var lishisf = this.jingssf_id.reverse()
							var name = [...new Set(lishisfs)]
							var name_id = [...new Set(lishisf)]
							
						this.form.service_labels_name= name.join(',');
						
						this.form.service_labels = name_id.join(',');
				
				console.log(this.form)	
				
				if (!this.form.mobile) {
					let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
					if (!reg.test(this.form.mobile)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的电话'
						})
						this.form.mobile = '';
						return false;
					}	
					return uni.showToast({
						   icon: 'none',
						    title:'填写手机号',			
						    duration:2000		  
						})
				}
				if (!this.form.service_labels_name) {
					
					return uni.showToast({
						   icon: 'none',
						    title:'选择咨询事项',			
						    duration:2000		  
						})
				}
				if (!this.form.address) {
					
					return uni.showToast({
						   icon: 'none',
						    title:'选择地区',			
						    duration:2000		  
						})
				}
				if (!this.form.nickname) {
					
					return uni.showToast({
						   icon: 'none',
						    title:'请输入姓名',			
						    duration:2000		  
						})
				}
				
							
				
				
				this.$request({
					url: '/api/User/editMyUserInfo',
					header: "application/x-www-form-urlencoded",
					data: {
						uid: this.form.uid,
						nickname: this.form.nickname,
						province_id: this.form.province_id,
						city_id: this.form.city_id,
						district_id: this.form.district_id,
						address: this.form.address,
						mobile: this.form.mobile,
						service_labels: this.form.service_labels,
						service_labels_name: this.form.service_labels_name,
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
						   
						    title:res.msg,			//标题
						    duration:2000		  //显示时间
						})
						setTimeout(() => {
						  uni.navigateBack({
						    delta:1
						  });
						}, 600);
						
					} else {
					uni.showToast({
				   icon: 'none',
				    title:res.msg,			//标题
				    duration:2000		  //显示时间
				})	
				
					}
				})
			}
		}
	}
</script>

<style>
	.sel-scroll-view-item-true {
		background-color: #FFF6EE;
		border-radius: 10rpx;
		padding: 20rpx;
		color: #FF9839;
		margin: 10rpx;
		border: 1rpx solid #FF9839;
	}

	.sel-scroll-view-item-trues {
		background-color: #FFF6EE;
		border-radius: 10rpx;
		padding: 20rpx;
		color: #FF9839;
		margin: 10rpx;
		/* border: 1rpx solid #FF9839; */
	}

	.fsafaf {
		text-align: right;
		/* // 重要是这个属性，设置光标的位置，ltr时是鼠标光标在右侧，rtl时是鼠标光标在左侧 */
		direction: ltr;
	}

	.page {
		background: #F8F8F8;
	}

	.linglein_meir {
		background-color: #F2F2F2;
		border-radius: 10rpx;
		padding: 20rpx;
		color: #999999;
		margin: 10rpx;
	}

	.linglein {
		/* width: 30%; */
		/* padding: 10rpx;
		line-height: 80rpx; */
	}

	.icon1 {
		width: 50rpx;
		height: 50rpx;
	}

	.sel-title {
		height: 600rpx;

		/* padding: 20rpx; display: flex; width: 100%; overflow: hidden; flex-wrap: wrap; */
		display: flex;
		flex-direction: column;
		/* 垂直方向 */
		/* height: 200px; /* 设置一个固定高度 */
		overflow: auto;
		/* 添加滚动条 */

	}
	.input_events_none{
	  pointer-events: none;
	}
</style>